<template>
  <div class="top_right">
    <div class="title">
      <h3>工单统计</h3>
      <span>{{ this.timeInfo.start.replace(/-/g, '.') }} ~ {{ this.timeInfo.end.replace(/-/g, '.') }}</span>
    </div>
    <div class="content">
      <div class="list" v-for="(item, index) in skuTopList" :key="item.skuName">
        <i :class="['iconfont icon-jiangbei-', `top${index}`]" v-if="index < 3"
          ><span class="number">{{ index + 1 }}</span></i
        >
        <i class="iconfont icon-books" v-else
          ><span class="subNumber">{{ index + 1 }}</span></i
        >
        <p>{{ item.skuName }}</p>
        <span>{{ item.count }}单</span>
      </div>
    </div>
  </div>
</template>

<script>
import { getCurrentDay, getMonth } from '@/plugins/formatDate.js'
export default {
  name: 'Ranking',
  props: {
    skuTopList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      // 时间
      timeInfo: {
        start: getMonth(),
        end: getCurrentDay()
      }
    }
  }
}
</script>

<style lang="less" scoped>
.top_right {
  width: 413px;
  height: 540px;
  padding: 20px;
  background-color: #fff;
  border-radius: 10px;
  margin-left: 20px;
  box-shadow: 1px 1px 10px rgb(240, 239, 239);
  .title {
    display: flex;
    align-items: center;
    h3 {
      font-size: 16px;
      color: #333;
    }
    span {
      color: #999;
      font-size: 12px;
      margin-left: 10px;
      height: 20px;
      line-height: 25px;
    }
  }
  .content {
    background-color: #fff;
    .list {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 20px;
      width: 100%;
      .iconfont {
        position: relative;
        width: 20px;
        font-size: 27px;
        margin-left: 10px;
        .number {
          font-size: 12px;
          position: absolute;
          top: 42%;
          left: 67%;
          transform: translate(-50%, -50%);
        }
      }
      .icon-books {
        color: #fcece4;
        .subNumber {
          font-size: 12px;
          position: absolute;
          top: 42%;
          left: 67%;
          transform: translate(-50%, -50%);
          color: #e9b499;
        }
      }
      .top0 {
        color: gold;
        fill: gold;
      }
      .top1 {
        color: rgb(200, 249, 255);
      }
      .top2 {
        color: rgb(240, 231, 179);
      }
      P {
        font-size: 14px;
        width: 150px;
        color: #333;
      }
      span {
        font-size: 14px;
        color: #737589;
      }
    }
  }
}
</style>
